/* eslint-disable vue/return-in-computed-property */
/* eslint-disable vue/return-in-computed-property */
<template>
  <div class="container">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%" :before-close="done" v-if="rowDetail">
      <el-row type="flex" justify="space-between">
        <el-col :span="6"> 【题型】:{{ rowDetail.questionType | questionType }} </el-col>
        <el-col :span="6"> 【编号】:{{ rowDetail.id }} </el-col>
        <el-col :span="6"> 【难度】:{{ rowDetail.difficulty | difficulty }} </el-col>
        <el-col :span="6"> 【标签】:{{ rowDetail.tags }} </el-col>
      </el-row>
      <el-row type="flex" justify="space-between" style="margin-top: 20px">
        <el-col :span="6"> 【学科】:{{ rowDetail.subject || rowDetail.subjectName }} </el-col>
        <el-col :span="6" :pull="3"> 【目录】:{{ rowDetail.catalog || rowDetail.directoryName }} </el-col>
        <el-col :span="6" :pull="6"> 【方向】:{{ rowDetail.direction }} </el-col>
      </el-row>
      <hr />
      <el-row :gutter="10" style="margin-top: 10px">
        <el-col :span="6">
          【题干】:
          <p v-html="rowDetail.question" class="text"></p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10" style="margin-top: 10px; margin-bottom: 10px">
          {{ rowDetail.questionType | questionType }}【选项】:(以下选中的选项为正确答案)
          <el-row>
            <!-- 单选 -->
            <el-col :span="1" v-if="rowDetail.questionType === '1'">
              <el-radio v-for="item in rowDetail.options" :key="item.id" :label="item.code" :value="item.isRight ? item.code : ''" style="margin-top: 10px; margin-bottom: 10px">{{
                item.title
              }}</el-radio>
            </el-col>
            <!-- 多选 -->
            <el-col :span="6" v-else-if="rowDetail.questionType === '2'">
              <el-checkbox v-for="item in rowDetail.options" :key="item.id" :label="item.code" :value="item.isRight === 1" style="margin-top: 10px; margin-bottom: 10px">{{ item.title }}</el-checkbox>
            </el-col>
            <!-- <el-col :span="6" v-else-if="rowDetail.questionType === '3'">
              <el-radio v-for="item in rowDetail.options" :key="item.id" :label="item.code" style="margin-top: 10px; margin-bottom: 10px">备选项</el-radio>
            </el-col> -->
          </el-row>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          【参考答案】: <el-button type="danger" @click="isShow = !isShow">{{ !isShow ? '视频答案预览' : '关闭答案预览' }}</el-button>
        </el-col>
      </el-row>
      <el-row v-if="isShow" style="margin-top: 20px">
        <el-col v-if="rowDetail.videoURL">
          <video :src="rowDetail.videoURL" controls="controls" style="width: 400px; height: 300px"></video>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col>
          【答案解析】:
          <div v-html="rowDetail.answer" style="display: inline-block"></div>
        </el-col>
      </el-row>
      <hr />
      <el-row>
        <el-col> 【题目备注】:{{ rowDetail.remarks }} </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="done">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    // 父子传值得到数据
    rowDetail: {
      type: Object,
      required: true
    },
    // 父子传值得到弹出层显示隐藏
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  filters: {
    // 筛选数据-->题型
    questionType (v) {
      for (let i = 0; i < questionType.length; i++) {
        if (questionType[i].value === +v) {
          return questionType[i].label
        }
      }
    },
    // 筛选数据-->难度
    difficulty (v) {
      for (let i = 0; i < difficulty.length; i++) {
        if (difficulty[i].value === +v) {
          return difficulty[i].label
        }
      }
    }
  },
  methods: {
    // 关闭弹出层
    done () {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped lang='less'>
.text {
  color: #0000ff;
}
</style>
